<script lang="ts" setup>
import { ref, onActivated } from "vue";
import router from "@/router";
import { useRoute } from "vue-router";
import PageWrapper from "@/components/Wrapper";
import detailTable from "./components/detailTable.vue";
import operation from "./components/operation.vue";
import {
  setStocktakingOrderRegistration,
  setStocktakingOrderDetail
} from "@/api/stocktakingOrder";
import { useMessage } from "@/hooks/useMessage";
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
const multiTagsStore = useMultiTagsStoreHook();

const { createNotification } = useMessage();
defineOptions({
  name: "inventoryCountCheckDetail"
});
const tableData = ref([]);

const tableHeight = ref(0);
const pageWrapperRef = ref();
const tableRef = ref(null);
const rows = ref(0);
const total = ref(0);
const route = useRoute();

onActivated(() => {
  const { id } = router.currentRoute.value.query;
  initData(id);
  pageWrapperRef.value.initData();
});

// 获取数据
const initData = (id: any) => {
  setStocktakingOrderDetail({ id: Number(id) }).then(rsp => {
    tableData.value = rsp.data.itemList;
  });
};

// 提交
const submitApply = () => {
  tableRef.value
    .validate()
    .then(() => {
      const { id } = router.currentRoute.value.query;
      setStocktakingOrderRegistration(
        Object.assign(
          { id },
          {
            itemList: tableRef.value.getTableData()
          }
        )
      ).then(rsp => {
        if (rsp.code === 0) {
          createNotification({
            title: "温馨提示",
            message: rsp.msg,
            type: "success"
          });
          multiTagsStore.handleTags("splice", route.path);
          router.back();
        }
      });
    })
    .catch(_ => {
      createNotification({
        type: "error",
        message: "请输入实盘库存"
      });
    });
};

// 设置表格行数和盘点物料总数
const setTotalData = (data: any) => {
  rows.value = data.length;
  total.value = data.filter(item => item.num !== item.instockNum).length;
};
</script>
<template>
  <div class="main_box">
    <PageWrapper
      ref="pageWrapperRef"
      v-model:height="tableHeight"
      :isShowBottom="false"
      :isShowLine="false"
      :isShowHeader="false"
    >
      <template #content>
        <div class="table_box">
          <operation />
          <detailTable
            ref="tableRef"
            :list="tableData"
            :tableHeight="tableHeight"
            @setTotalData="setTotalData"
          />
        </div>
      </template>
      <template #footer>
        <section
          class="flex flex-row justify-between pb-[16px] pt-[16px] pr-[24px] pl-[24px] bg-white rounded-t-[8px]"
        >
          <div class="flex flex-row">
            <div class="flex flex-row items-center mr-[80px]">
              <span>待盘物料记录行数：</span>
              <p class="text-[20px] font-bold">{{ rows }}</p>
            </div>
            <div class="flex flex-row items-center mr-[80px]">
              <span>存在盈亏差异物料记录行数：</span>
              <p class="text-[20px] font-bold">{{ total }}</p>
            </div>
          </div>

          <el-button type="primary" @click="submitApply">提交</el-button>
        </section>
      </template>
    </PageWrapper>
  </div>
</template>
<style lang="scss" scoped></style>
